<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <div class="releaseAd mainSection clearfix">
      <div class="releaseAdBox leftBox fl">
        <div class="inner">
          <h3 class="title">{{$t('l.header_6_1')}}</h3>
          <div class="formBox">
            <el-form
              label-position="top"
              ref="merchantApplyForm"
              label-width="80px"
              :model="merchantApplyForm"
            >
              <el-row :gutter="22" style="margin-bottom:30px">
                <el-col :span="24">
                  <div class="bindsuc" style="padding-top: 0;" v-if="intro.userType==2">
                            <img style="padding-top:100px;" src="../../assets/images/sucico.png">
                            <h2>{{$t('l.add_153_1')}}！</h2>
                        </div>
                  <div v-else style="    box-shadow: rgba(0, 0, 0, 0.13) 0px 0px 6px 0px;
    padding: 50px 50px 20px 50px;
    box-sizing: border-box;">
                  <div class="apply-content" style="height:500px;margin-bottom:30px;" ref="scrollwrap">
                    <div class="scrollwrap" >
                    <h1 style="text-align: center;"><strong>《OTC</strong><strong>服务协议说明</strong><strong>》</strong></h1>
<p><strong>第一条：制定的目的和依据</strong>&nbsp;鉴于洗钱活动将严重危害数字资产交易的发展，助长和滋生腐败、败坏社会风气，损害用户的正当权益，破坏数字资产交易平台稳健经营的基础，加大数字资产交易平台的法律和运营风险，为预防洗钱和恐怖融资活动，全面履行反洗钱和反恐融资法律的相关规定，根据《用户协议》、《隐私条款》、《了解你的客户和反洗钱政策》、《大额交易管理办法》等公司规定，制定本指引。</p>
<p><strong>第二条：适用范围&nbsp;</strong>本指引适用于在Qtglobal平台（以下简称&ldquo;OTC平台&rdquo;）交易的所有用户。用户应当在遵循其所在地国家或地区反洗钱和反恐融资方面的法律规定，在用户所在地区法律规定的范围内，执行本指引之规定。用户所在国家或者地区有更严格要求的，遵守其规定。</p>
<p><strong>第三条：反洗钱和反恐怖融资&nbsp;</strong>是指为了防范不法分子通过OTC平台进行交易从而掩饰、隐瞒毒品犯罪、黑社会性质的组织犯罪、恐怖活动犯罪、走私犯罪、贪污贿赂犯罪、金融诈骗犯罪、破坏金融管理秩序犯罪等违法所得及其收益的来源和性质的洗钱活动，依照相关法律和Qtglobal反洗钱相关规定采取相关措施的行为。</p>
<p><strong>第四条：</strong><strong>Qtglobal</strong><strong>反洗钱相关规定</strong>&nbsp;反洗钱（包括反恐怖融资，下同）相关规则包含《用户协议》、《隐私条款》、《了解你的客户和反洗钱政策》中反洗钱的部分、《大额交易管理办法》与本指引。若本指引中规定的内容与其它规则相冲突，则本指引优先适用。</p>
<p><strong>第五条：OTC平台反洗钱基本原则</strong>&nbsp;OTC平台按照以下原则开展客户风险监控工作：</p>
<ul>
<li><u>全面性原则</u>。OTC平台会综合考虑客户可能涉嫌洗钱的各类风险因素，采取合理方式对所有客户进行风险监控。</li>
<li><u>审慎性原则</u>。OTC平台会在充分了解客户的基础上，提高对客户身份的识别能力，审慎进行客户风险监控。</li>
<li><u>持续性原则</u>。OTC平台会对客户风险进行持续关注，根据实际情况适做出应对。</li>
<li><u>保密性原则</u>。OTC平台所掌握的客户身份信息、交易信息和风险等级信息等予以严格保密，非依法律规定和监管要求，不会向任何单位和个人提供。</li>
<li><u>分级管理原则</u>。OTC平台根据客户的风险等级，定期审核所保存的客户基本信息，对风险等级较高客户的审核应当严于对风险等级较低客户的审核。</li>
</ul>
<p><strong>第六条：个人用户文件之提交&nbsp;</strong>OTC个人用户应当依据Qtglobal《了解你的客户和反洗钱政策》的反洗钱相关规定提交以下信息和资料：</p>
<ul>
<li>个人姓名；</li>
<li>身份证或护照复印件；</li>
<li>其它应OTC要求应当提供之信息或文件。</li>
</ul>
<p><strong>第七条：机构用户文件之提交&nbsp;</strong>OTC机构用户应当依据Qtglobal《了解你的客户和反洗钱政策》的反洗钱相关规定提交以下信息和资料：</p>
<ul>
<li>公司名称；</li>
<li>公司注册办公地址；</li>
<li>公司法定代表人；</li>
<li>公司法定代表人住所地；</li>
<li>公司营业执照；</li>
<li>公司法定代表人身份证或护照复印件；</li>
<li>其它应OTC要求应当提供之信息或文件。</li>
</ul>
<p><strong>第八条：用户文件之审查</strong>&nbsp;OTC平台会依据Qtglobal反洗钱相关规定中的客户识别制度对客户所提交的相关信息进行核实和记录，若OTC平台对于客户所提交的资料有疑问时，有权向相关主管机构或部门进行核实。</p>
<p><strong>第九条：低风险用户之监测&nbsp;</strong>OTC平台会根据Qtglobal反洗钱规定的具体要求对低风险用户进行检测，OTC平台保留对低风险用户进行调级的权利。</p>
<p><strong>第十条：高风险用户之监测&nbsp;</strong>OTC平台对于高风险类别的客户，会于每半年进行一次审核，更新客户身份基本信息并了解其资金来源、资金用途、经济状况或者经营状况等信息。</p>
<p><strong>第十一条：用户文件之保存&nbsp;</strong>OTC平台会依法采取必要措施将客户身份资料和交易信息保存一定期限。参照国际通行规则，用户身份资料自业务关系结束后，客户交易信息自交易结束后，应至少保存五年。</p>
<p><strong>第十二条：用户之注意&nbsp;</strong>OTC用户应当注意以下事项：</p>
<ul>
<li>禁止将用户本人的账号出借给他人使用；</li>
<li>禁止出租、出借用户本人身份证件；</li>
<li>禁止出租、出借、透露用户本人的账户、银行卡、存折、密码等重要个人财产信息；</li>
<li>用户应当主动配合OTC平台进行客户身份识别；</li>
<li>在OTC平台进行交易时，选择并使用安全可靠的第三方金融机构进行支付活动。</li>
</ul>
<p><strong>第十三条：可疑行为之报告&nbsp;</strong>若OTC平台用户在平台交易时发现任何账户可能从事洗钱或恐怖融资活动，用户可以向OTC平台进行报告。</p>
<p><strong>第十四条：指引之解释&nbsp;</strong>本指引由OTC平台进行解释。</p>
<p><strong>第十五条：生效期&nbsp;</strong>本指引自发布之日起实施。</p>
<p>&nbsp;</p></div>
                  </div>
                  </div>
                  <div class="apply-content" style="height:500px;margin-bottom:30px;display:none" ref="scrollwrap" v-if="intro.userType==2"
                  >
                    <div class="scrollwrap" ></div></div>
                </el-col>
              </el-row>
              <el-row :gutter="22" v-if="intro.userType!==2">
                <el-col :span="24">
              <label class="checkbox agreebox" :class="isAgree?'active':''" @click.stop="isAgree=!isAgree"><span>我已阅读知晓并同意以上说明及协议；并且同意锁定<strong>{{lockAmount}}</strong>USDT作为保证金</span>
                        </label>
                        </el-col>
              </el-row>
              <div class="btnBox">
                <el-button
                  type="primary"
                  class="btn-apply"
                  @click="onSubmit('0')"
                  v-if="intro.userType==2"
                >{{$t('l.advert_about23_2')}}</el-button>
                <el-button
                  type="primary"
                  class="btn-apply"
                  @click="onSubmit('1')"
                  v-else
                >{{$t('l.advert_about23_1')}}</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
import { constants } from "fs";
import BScroll from 'better-scroll'

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      isLogin: this.$store.state.usertoken ? true : false,
      intro:this.$store.state.userintro,
      verifiedLevel:this.$store.state.userintro?this.$store.state.userintro.verifiedLevel:"",
      merchantApplyForm: {
        type: '1', 
      },
      idType:1,
      isAgree:false,
      lockAmount:'0'
    }
  },
  async created() {
    this.init();
  },
  methods: {
    init() {
      this.getByDictKey();
      if(this.$store.state.usertoken){
        this.baseinfo(); 
      }
      this.inCheckAuth()
      // console.log("intro",this.intro)
    },
    inCheckAuth(){
      if (!this.checkAuth()) {
        this.alertAuth();
        return false;
      }

    },
    // 实名认证
    checkAuth() {
      let { verifiedLevel, phoneEnabled,idType} = this.$store.state.userintro;
      let authurl = "";
      this.verifiedLevel = verifiedLevel;
      this.idType = idType;
      this.phoneEnabled = phoneEnabled;

      if (verifiedLevel == "") {
        authurl = "/c1Auth";
      } else if (verifiedLevel == 1) {
        authurl = "/c2Auth";
      }

      // 提示未完成C2实名认证
      if(idType==1){
        if (verifiedLevel < 3) {
          this.authurl = authurl;
          return false;
        }
      }else{
        if (verifiedLevel < 2) {
          this.authurl = authurl;
          return false;
        }
      }
      

      return true;
    },
    // 未完成实名认证提示
    alertAuth() {
      let that = this;
      let title = this.$t("l.placing_order0");
      let btnText = this.$t("l.placing_order3");
      if(that.idType==1){
        this.$alert(
          `<h2>${this.$t("l.placing_order1")}</h2><p>${this.$t(
            "l.add_159"
          )}<p>`,
          title,
          {
            confirmButtonText: btnText,
            dangerouslyUseHTMLString: true,
            callback: action => {
              if (action === "confirm") {
                this.$router.push(that.authurl);
              }
            },
            customClass: "market-message-box"
          }
        );
      }else{
        this.$alert(
          `<h2>${this.$t("l.placing_order1")}</h2><p>${this.$t(
            "l.placing_order2"
          )}<p>`,
          title,
          {
            confirmButtonText: btnText,
            dangerouslyUseHTMLString: true,
            callback: action => {
              if (action === "confirm") {
                this.$router.push(that.authurl);
              }
            },
            customClass: "market-message-box"
          }
        );
      }
      
    },
    async getByDictKey() {
      let res = await api.getByDictKey({
        dictKey: "merchant.apply.freeze.amount"
      });
      let { code, data, msg } = res.data;;

      if (code == 0) {
        this.lockAmount = data.value;
        // console.log(data.value)
      } else {
        this.$layer.msg(msg);
      }
    },
    //获取一次性token
    async createOnceToken() {
      let that = this;
      let res = await api.createOnceToken();
      if (res.data.code == 0) {
        that.onceToken = res.data.data.resultToken;
      }
    },
    onSubmit(a) {
      if (!this.isLogin) {
        this.$router.push("/login");
        return false;
      }
      if (!this.checkAuth()) {
        this.alertAuth();
        return false;
      }
      if(this.intro.userType!==2){
      if(!this.isAgree){
        this.$layer.msg(this.$t('l.add_57_1'));
        return false;
      }
      }
      if(a==1){
        this.merchantApplyForm.type='1'
      }else{
        this.merchantApplyForm.type='-1'
      }      
      this.$refs["merchantApplyForm"].validate(valid => {
        if (valid) {
          this.c2cMerchantApply();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async c2cMerchantApply() {
      let param = {
        type: this.merchantApplyForm.type,
        onceToken: this.onceToken
      };

      let res = await api.c2cMerchantApply(param);

      if (res.data.code == 0) {
        this.$layer.msg(this.$t("l.other_a_41"));
        this.$router.push("/applyForMerchant");
      } else {
        this.$layer.msg(res.data.msg);
        this.createOnceToken();
      }
    },
    //基本信息
    async baseinfo(){
        let that = this;
        let res = await api.baseinfo()
        if(res.data.code==0){
            this.intro = res.data.data.info;
            that.idType = res.data.data.info.idType;
           
        }else{
            that.$layer.msg(res.data.msg);
        }

        
    }
  },
  mounted() {
    this.createOnceToken();
    this.$nextTick(() => {
           this.scroll = new BScroll(this.$refs.scrollwrap, {
               mouseWheel:true,
               scrollbar: {
                fade: true,
                interactive: true // 1.8.0 新增
                }
           })
       })
  }
};
</script>

<style lang="less" scoped>
.c2cTrade {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
}
.releaseAd {
  width: 1200px;
  margin: 20px auto 0;
  height: 990px;
  box-sizing: border-box;
  padding-bottom: 160px;
  .leftBox {
    width: 1200px;
    height: 830px;
    box-sizing: border-box;
    padding: 36px 143px;
    background: #fff;
  }
  .rightBox {
    width: 334px;
    height: 830px;
    padding: 32px 32px 27px;
    background: #fff;
    box-sizing: border-box;
  }
  .inner {
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;

    > .title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 56, 94, 1);
      line-height: 100%;
      border-left: 3px solid #2D8DFE;
      padding-left: 10px;
      margin-left: -100px;
      margin-bottom: 36px;
    }
  }
}

/deep/.formBox {
  width: 564px;
  margin: 0 auto;
  .btnBox {
    padding-top: 20px;
  }
  .line {
    display: inline-block;
    width: 23px;
    height: 1px;
    background: #e9eef4;
  }
  .btn-apply {
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
    color: #fff;
    border-radius: 4px;
  }
  .noteTip {
    height: 20px;
    font-size: 14px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(239, 87, 86, 1);
    line-height: 20px;
    text-align: center;
    margin-top: 14px;
  }
  .el-form-item.is-required .el-form-item__label:before {
    display: none;
  }
  .el-form-item__label {
    height: 20px;
    font-size: 14px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 1);
    line-height: 20px;
    margin-bottom: 5px;
    em {
      position: absolute;
      top: 0;
      right: 0;
      // opacity: 0.5;
      font-style: normal;
    }
  }
  .el-input__suffix {
    right: 11px;
  }
  .el-form-item {
    position: relative;
    margin-bottom: 22px;
  }
  .el-input__inner {
    font-size: 14px;
    color: #33385e;
  }
  .el-input__text {
    font-style: normal;
    color: #33385e;
  }
  .el-text-blue {
    color: #2D8DFE;
    cursor: pointer;
  }
  .el-suffix-icon {
    display: inline-block;
    width: 50px;
    height: 26px;
    line-height: 26px;
    background: rgba(249, 249, 255, 1);
    border-radius: 2px;
    border: 1px solid rgba(233, 238, 244, 1);
    font-size: 14px;
    cursor: pointer;
  }
  .el-input.is-disabled .el-input__inner {
    color: #33385e;
  }
  .el-textarea__inner {
    height: 77px;
  }
  .el-checkbox {
    width: 109px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    color: #33385e;
    text-align: center;
    background: #f2f6fa;
    border-width: 0;
    box-sizing: border-box;
    &.is-checked {
      background: url(../../assets/images/pay-selected.png) no-repeat center top;
    }
  }
  .el-checkbox__label {
    padding-left: 0;
  }
  .el-checkbox__input {
    display: none;
  }
  .el-select {
    width: 100%;
  }
}

.apply-content{
  overflow: hidden;
  line-height: 2;
  strong {
      font-weight: bold;
  }
  h1{
    font-size: 28px;
    font-weight: bold;
  }
}

</style>
<style lang="less">
.el-message-box.market-message-box {
  width: 452px;
  padding-bottom: 40px;
  .el-message-box__header {
    padding: 16px 15px 15px 23px;
    background: #f2f6fa;
  }
  .el-message-box__title {
    height: 24px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: #33385e;
    line-height: 24px;
  }
  .el-message-box__content {
    font-size: 14px;
    color: #33385e;
    // height: 138px;
    padding: 25px 67px 32px;
    text-align: left;
    box-sizing: border-box;
  }
  .el-message-box__btns {
    text-align: center;
  }
  .el-button {
    width: 318px;
    background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
    border-radius: 4px;
  }
  h2 {
    height: 24px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: #33385e;
    line-height: 24px;
    text-align: center;
    margin-bottom: 10px;
  }
}
.el-dialog {
  .el-dialog__header {
    color: #33385e;
    padding-left: 23px;
    background: #f2f6fa;
    .el-dialog__title {
      font-size: 16px;
      line-height: 24px;
      color: #33385e;
    }
  }
}
.tipsDialog {
  .el-dialog__body {
    color: #33385e;
    padding: 40px 52px 40px;
    text-align: left;
    font-size: 14px;
    line-height: 28px;
    em {
      font-style: normal;
      color: #2D8DFE;
    }
  }
  .el-dialog__footer {
    text-align: center;
    padding: 0 0 44px;
    .el-button {
      width: 418px;
      height: 40px;
      margin: 0;
      &:not(last-child) {
        margin-top: 20px;
      }
    }
    .el-button--primary {
      background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
      border-radius: 4px;
    }
  }
}
.el-radio-button__inner:hover{
  color:#2D8DFE;
}
.tradeDialog {
  .el-dialog__body {
    padding: 36px 50px 18px;
  }
  .el-dialog__footer {
    text-align: center;
    padding: 0 0 44px;
    .el-button {
      width: 190px;
      height: 40px;
      margin: 0;
      &:not(last-child) {
        margin-left: 12px;
      }
    }
    .el-button--primary {
      background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
      border-radius: 4px;
    }
  }
  .el-form-item {
    position: relative;
  }
  .el-form-item__label {
    font-size: 14px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 20px;
    margin-bottom: 13px;
    padding: 0;
    em {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0.5;
      font-style: normal;
    }
  }
  .el-radio {
    width: 109px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    color: #33385e;
    text-align: center;
    background: #f2f6fa;
    border-width: 0;
    box-sizing: border-box;
    &.is-checked {
      background: url(../../assets/images/pay-selected.png) no-repeat;
    }
  }
  .el-radio__label {
    padding-left: 0;
    color: #2D8DFE;
  }
  .el-radio__input {
    display: none;
  }
  .el-form {
    padding-top: 10px;
  }
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-input__suffix {
    right: 13px;
    color: #33385e;
  }
  .grid-content {
    font-familyA: OpenSans;
    min-height: 38px;
    margin-bottom: 12px;
    > span {
      display: inline-block;
      vertical-align: middle;
    }
    img {
      width: 16px;
      margin-right: 10px;
      margin-top: 2px;
    }
  }
  .rowItemNotice {
    position: absolute;
    top: -43px;
    right: 0;
    color: #33385e;
    opacity: 0.5;
  }
}

</style>
<style  scoped>
.mod-head {
    width: 100%;
    height: 34px;
    background: #f7f8fc;
    padding: 0 ;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} .mod-head {
    background: transparent;
        background: rgba(242, 246, 250, 0.4);
}
 .mod-head .mock-a {
    float: left;
    margin: 0 16px 0 0;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 400;
    color: #596a7a;
    line-height: 32px;
    cursor: pointer;
    color: #1c242c;
}
.mod-head .mock-a.active {
    color: #2D8DFE;
    border-bottom: 2px solid #2D8DFE;
    background: none;
    border-top: none;
}
</style>
